<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>预约列表</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h2>预约列表</h2>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>用户姓名</th>
            <th>医生姓名</th>
            <th>科室名</th>
            <th>预约时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="appointmentDetailsList">
        <!-- 动态内容将由 JavaScript 填充 -->
        </tbody>
    </table>
</div>

<script src="/js/jquery.min.js"></script>
<script>
    function formatDateTime(dateString) {
        const date = new Date(dateString);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}`;
    }

    $(document).ready(function () {
        $.get("/users/getAppointmentDetails", function (data) {
            var tbody = $("#appointmentDetailsList");
            if (data.length === 0) {
                tbody.append("<tr><td colspan='5'>暂无预约信息</td></tr>");
            } else {
                $.each(data, function (index, appointmentInfo) {
                    // 确保 departmentName 不为 null
                    const deptName = appointmentInfo.departmentName || "未知科室";

                    tbody.append(
                        "<tr>" +
                        "<td>" + appointmentInfo.username + "</td>" +
                        "<td>" + appointmentInfo.doctorName + "</td>" +
                        "<td>" + deptName + "</td>" +
                        "<td>" + formatDateTime(appointmentInfo.visitTime) + "</td>" +
                        "<td>" +
                        "<button class='btn btn-primary btn-sm view-waiting-btn' " +
                        "data-schedule-id='" + appointmentInfo.scheduleId + "' " +
                        "data-department-name='" + deptName + "'>查看排队</button>" +
                        "</td>" +
                        "</tr>"
                    );
                });
            }
        });

        // 绑定点击事件
        $(document).on('click', '.view-waiting-btn', function () {
            const scheduleId = $(this).data('schedule-id');
            const departmentName = $(this).data('department-name');

            const appointmentInfo = {
                scheduleId: scheduleId,
                departmentName: departmentName
            };

            fetch('/getAppointmentWaiting', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(appointmentInfo)
            }).then(() => {
                window.location.href = '/waiting?scheduleId=' + scheduleId;
            }).catch(error => {
                alert("请求失败：" + error.message);
            });
        });
    });
</script>
</body>
</html>
